<template>
    <div class="category-add">
        <div class="name">
            <el-form label-position="left" label-width="80px">
                <el-form-item label="名称">
                    <el-input></el-input>
                </el-form-item>
                <el-form-item label="属性">
                    <div class="tag">
			            <el-tag :key="tag" v-for="tag in dynamicTags" closable :disable-transitions="false" @close="handleClose(tag)">
			                {{tag}}
			            </el-tag>
			            <el-input class="input-new-tag" v-if="inputVisible" v-model="inputValue" ref="saveTagInput" size="small" @keyup.enter.native="handleInputConfirm" @blur="handleInputConfirm">
			            </el-input>
			            <el-button v-else class="button-new-tag" size="small" @click="showInput">+ New Tag</el-button>
			        </div>
                </el-form-item>
                <el-form-item>
				    <el-button type="primary" @click="onSubmit">立即创建</el-button>
				</el-form-item>
            </el-form>
        </div>
    </div>
</template>
<script>
// @ 是 /src 的别名
export default {
    name: 'CategoryAdd',
    props: {

    },
    data() {
        return {
            dynamicTags: ['标签一', '标签二', '标签三'],
            inputVisible: false,
            inputValue: ''
        };
    },
    methods: {
        handleClose(tag) {
            this.dynamicTags.splice(this.dynamicTags.indexOf(tag), 1);
        },

        showInput() {
            this.inputVisible = true;
            this.$nextTick(_ => {
                this.$refs.saveTagInput.$refs.input.focus();
            });
        },

        handleInputConfirm() {
            let inputValue = this.inputValue;
            if (inputValue) {
                this.dynamicTags.push(inputValue);
            }
            this.inputVisible = false;
            this.inputValue = '';
        }
    }
}
</script>
<style scoped lang="styl">
.name 
	width 600px 
.el-tag+.el-tag {
    margin:10px;
}

.button-new-tag{
    margin:10px;
    height: 32px;
    line-height: 30px;
    padding-top: 0;
    padding-bottom: 0;
}

.input-new-tag {
    width: 90px;
    margin:10px;
    vertical-align: bottom;
}
</style>